<template>
  <div class="wrap">
    <div class="topWrap">
      <div class="lineLeft" :class="{ lineLeft2: contentType == 2 }"></div>
      <div class="listRight">
        <div class="lineItem">举报类型：{{ typeName }}</div>
        <div class="lineItem ellipsis" v-if="contentType != 2">举报内容：{{ dataJump.content || dataJump.commentContent }}</div>
        <div class="lineItem" v-if="contentType != 2">发帖用户：{{ dataJump.nickName || dataJump.fromNickName }}</div>
        <div class="lineItem" v-if="contentType == 2">店铺名称：{{ dataJump.shopName }}</div>
        <div class="lineItem">内容属性：{{ contentType == 0 ? '帖子' : contentType == 1 ? '帖子评论' : '店铺' }}</div>
      </div>
    </div>
    <div class="textArea">
    
      <!-- <textarea rows="" cols="" placeholder="请输入申诉备注(200字)" maxlength="200" v-model="reportContent"></textarea> -->
      <van-field 
       rows="3"
       class="input"
        autosize 
        type="textarea"
         placeholder="请输入申诉备注(200字)" 
         maxlength="200" 
         v-model="reportContent" 
         show-word-limit />
    </div>
    <div class="uploadImg">
      <van-uploader :max-size="500 * 1024"  @oversize="onOversize"  v-model="fileList" :after-read="afterRead" :max-count="6" />
    </div>
    <div class="submit" @click="getInsertReport">提交</div>
  </div>
</template>
<script>
import axios from 'axios'; // 引入axios
import { Field, Uploader } from 'vant';
import { apiInsertReport } from '@/request/api'; // api接口
export default {
  name: 'App',
  data() {
    return {
      value: '',
      fileList: [],
      dataJump: '',
      contentType: '', //举报内容类型0帖子1评论2店铺
      typeName: '',
      reqimageUrl: '',
      reportContent: '', //填写的举报理由
    };
  },
  mounted() {
    
  },
  created(){
    this.dataJump =  this.$store.state.reportPara.dataJump;
    this.contentType = this.$store.state.reportPara.contentType;
    this.typeName = this.$store.state.reportPara.typeName;
  },
  methods: {
     onOversize(file) {
      this.$toast('文件大小不能超过 500kb');
    },
    //上传图片：
    afterRead(file) {},
    upLoadImg(data) {
      var that = this;
      var serverSrc = this.$imgUrl;
      var form_data = new FormData();
      form_data.append('file', data);
      axios({
        url: serverSrc + '/common/upload',
        data: form_data,
        contentType: false,
        processData: false,
        method: 'post',
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      }).then(function (res) {
        console.log('res.data.data.fileName', res.data.data.fileName);
        // that.reqimageUrl.push(res.data.data.fileName);
        that.reqimageUrl = that.reqimageUrl + res.data.data.fileName + ',';
        console.log('reqimageUrl', that.reqimageUrl);
      });
    },
    //发布举报:
    getInsertReport() {
      var that = this;
      this.fileList.map((item) => {
        that.upLoadImg(item.file);
      });
      console.log('520', that.dataJump);
      var contentType = that.contentType;
      // var articleId =''
      // if(contentType == 0){
      //   articleId = that.dataJump.id
      // }else if(contentType == 2){
      //    articleId = that.dataJump.articleId
      // }
      setTimeout(function () {
        // console.log(5555, that.reqimageUrl.toString().slice(0, -1));
        apiInsertReport({
          commentId: contentType == 1 ? that.dataJump.id : '', //评论id
          articleId: contentType == 0 ? that.dataJump.id : contentType == 1 ? that.dataJump.articleId : '', //帖子id
          shopId: contentType == 2 ? that.dataJump.id : '', //店铺id
          content: contentType == 2 ? that.dataJump.shopName : contentType == 0 ? that.dataJump.content : contentType == 1 ? that.dataJump.commentContent : '', //这里是举报评论内容，如果是店铺则为店铺名字还需完善,帖子是否是content字段也需要核实
          contentType: contentType, //举报内容类型0帖子1评论2店铺
          imageUrl: that.reqimageUrl.toString().slice(0, -1),
          reason: that.reportContent,
          toUserId: that.dataJump.fromUserId || that.dataJump.userId, //被举报用户id，这里只写了举报评论，帖子和店铺的id还需要完善
          typeName: that.typeName,
        }).then((res) => {
          if (res.code == 200) {
            that.$Toast.success('提交成功,等待审核...');
            if (contentType == 2) {
              that.$router.push({
                path: '/pages/shopInfo',
                replace: true,
                query: {
                  shopId: that.dataJump.id,
                },
              });
            } else {
              that.$router.push({
                path: '/pages/forumIndex',
                replace: true,
              });
            }
          }
        });
      }, 1000);
    },
  },
  components: {
    [Field.name]: Field,
    [Uploader.name]: Uploader,
  },
};
</script>

<style scoped>
.wrap {
  min-height: 100vh;
  background-color: #f2f4fa;
  padding-top: 15px;
}
.topWrap {
  width: calc(100% - 20px);
  /* height: 106px; */
  background: #ffffff;
  border-radius: 20px;
  margin: 0 auto;
  font-size: 13px;
  font-weight: 400;
  color: #181818;
  padding: 20px 0px;
  overflow: hidden;
  display: flex;
}
.lineLeft {
  float: left;
  width: 6px;
  height: 67px;
  /* height: 30px; */
  background: #181818;
  border-radius: 3px;
  margin: 10px 15px;
}
.lineLeft2 {
  height: 45px !important;
}
.listRight {
  float: left;
}
.lineItem {
  margin-bottom: 5px;
}
.textArea {
  width: calc(100% - 20px);
  margin: 7px auto;
  background: #ffffff;
  border-radius: 20px;
}
/* textarea {
  width: 85%;
  border: 1px solid #fff;
  height: 100px;
  border-radius: 20px;
  padding: 20px;
} */
.input{
  border: 1px solid #fff;
  border-radius: 20px;
  padding: 20px;
}
textarea::placeholder {
  font-size: 13px;
  font-weight: 300;
  color: #999999;
}

.uploadImg {
  width: calc(100% - 20px);
  margin: 21px auto;
}

.submit {
  width: 90%;
  height: 50px;
  line-height: 50px;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  position: fixed;
  bottom: 40px;
  left: 5%;
}
.ellipsis{
  display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
</style>
